<template>
  <div class="box s-bg s-bg-1">
    <p class="note">登录网易云音乐，可以享受无限收藏的乐趣，并且无限同步到手机</p>
    <a href="javascript:;" class="btn s-bg s-bg-2">用户登录</a>
  </div>
</template>

<script>
export default {
  name: 'UserLogin'
}
</script>

<style scoped>
.box {
  /* width: 250px; */
  height: 126px;
}
/* 用户登录按钮 */
.btn {
  display: block;
  width: 100px;
  height: 31px;
  line-height: 31px;
  text-align: center;
  color: #fff;
  text-shadow: 0 1px 0 #8a060b;
  margin: 0 auto;
}
.btn:hover {
  color: #fff;
}
.note {
  width: 205px;
  margin: 0 auto;
  padding: 16px 0;
  line-height: 22px;
  color: #666;
}

.s-bg {
  background: url(https://s2.music.126.net/style/web2/img/index/index.png?5e09722e9fbdde4e9174d3dbaf6141bd) no-repeat 0 9999px;
}
.s-bg-1 {
  background-position: 0 0;
}
.s-bg-2 {
  background-position: 0 -195px;
}
.s-bg-2:hover {
  background-position: -110px -195px;
}
</style>
